<template>
  <div class="heatmap-container">
    <h2>城市热力图分析</h2>
    <div class="dashboard-grid">
      <ChinaMap class="dashboard-card" />
      <RegionStepsMap class="dashboard-card" />
    </div>
  </div>
</template>

<script setup>
import ChinaMap from '../components/ChinaMap.vue';
import RegionStepsMap from '../components/RegionStepsMap.vue';
</script>

<style scoped>
.heatmap-container {
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.dashboard-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
}
.dashboard-card {
  background: white;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  margin: 0;
}
h2 {
  margin: 0;
  padding: 16px 0 0 0;
  text-align: left;
}
</style>